<template>
	<view>
		<view class="prefer-posi">
			<!-- 筛选区 -->
			<view class="delica-view">
				<view class="delica-list delica-grow" @click="multiple()">
					<text>{{synthesize}}</text>
					<image src="../../../static/icon.jpg" mode="widthFix"></image>
				</view>
				<view class="delica-grow" @click="saLes()">
					销量高
				</view>
				<view class="delica-grow" @click="saLes()">
					速度快
				</view>
				<view class="delica-grow" @click="saLes()">
					津贴联盟
				</view>
				<view class="delica-list delica-right" @click="scReen()">
					<text>筛选</text>
					<image src="../../../static/icon.jpg" mode="widthFix"></image>
				</view>
			</view>
			<!-- 综合排序筛选 -->
			<view class="sortlist sortliteltle" v-if="drop" >
				<block v-for="(item,index) in sortlist" :key="index">
					<text :class="{activeb:index==num}" @click="sortClick(index,item.name,item.screen,item.nums)">{{item.name}}</text>
				</block>
			</view>
			<!-- 多个筛选区 -->
			<view class="sortlist sortlist-view" v-if="sortmen">
				<!-- 多选：商家特色-->
				<block v-for="(item,index) in screendata" :key="index" >
					<view>
						<view class="sorlist-title">
							{{item.title}}
						</view>
						<view class="sorlist-flex">
							<block v-for="(itemdata,indexs) in item.datas" :key="indexs">
								<text class="Choice" :class="{scractive:itemdata.id===2}" @click="screenchoIce(indexs,itemdata.sign)">{{itemdata.name}}</text>
							</block>
						</view>
					</view>
				</block>
				<!-- 单选:人均价 -->
				<block v-for="(item,index) in person" :key="index">
					<view>
						<view class="sorlist-title"></view>
						<view class="sorlist-flex">
							<block v-for="(itemdata,indexs) in item.datas" :key="indexs">
								<text class="Choice" :class="{scractive : indexs==scrnum}" @click="pesonechoIce(indexs,itemdata.per)">{{itemdata.name}}</text>
							</block>
						</view>
					</view>

				</block>
				<!-- 顶置 -->
				<view class="sorlist-bottom">
					<text @click="emPty()">清空</text>
					<text @click="flag && compLete()">完成</text>
				</view>
			</view>
		</view>
		<view class="yin" v-if="ying" @click="backClic()"></view>
	</view>
</template>

<script>
	// 引入post请求
	import {publicing} from "../../../api/api.js"
	// 引入请求地址
	import {startingurl,multipleurl} from "../../../api/request.js"
	export default {
		data() {
			return {
				drop:false,
				sortmen:false,
				ying:false,
				flag:false,
				synthesize:"综合排序",
				scrnum:-1,
				// 接收筛选的对象
				multiobj:{},
				sortlist: [{
						"name": "综合排序",
						"screen": "_id",
						"nums": 1
					},
					{
						"name": "起送价最低",
						"screen": "delivering",
						"nums": 1
					},
					{
						"name": "配送费最低",
						"screen": "physical",
						"nums": 1
					},
					{
						"name": "人均高到低",
						"screen": "capita",
						"nums": 1
					},
					{
						"name": "人均低到高",
						"screen": "capita",
						"nums": 1
					}
				],
				//多选
				screendata: [{
					"title": "商家特色（多选择）",
					"datas": [{
							"id": 1,
							"sign": "duration",
							"name": "配送最快"
						},
						{
							"id": 1,
							"sign": "deliver",
							"name": "0元起送"
						},
						{
							"id": 1,
							"sign": "physi",
							"name": "免配送费"
						},
					]
				}, ],
				// 人均价筛选
				person: [{
					"title": "人均价",
					"datas": [{
							"name": "20元以下",
							"per": {
								"$lt": 20
							}

						},
						{
							"name": "20-40元",
							"per": {
								"$lte":40,
								"$gte":20
							}

						},
						{
							"name": "40元以上",
							"per": {
								"$gt": 40
							}

						},
					]
				}, 
				]
			}
		},
		methods:{
			multiple(){
				this.drop=true,
				this.sortmen=false
				this.backOne()
			},
			// 综合排序替换
			sortClick(index,name,screen,nums){
				this.synthesize=name
				this.num =index
				console.log(screen+nums)
				this.backClick()
				this.starTing(screen,nums)
			},
			// 综合排序的请求
			starTing(screen,nums){
				let Data={
					screen,
					nums
				}
				publicing(startingurl,Data)
				.then((res)=>{
					// console.log(res)
					// 存储到vuex数据仓库
					this.$store.commit('screenmuta',res.data)
				})
				.catch((err)=>{
					console.log(err)
					
					
				})
			},
			// 销量,速度,津贴
			saLes(){
				this.backClick()
			},
			// 筛选
			scReen(){
				this.drop=false
				this.sortmen=true
				this.backOne()
			},
			
			// 透明背景
			backOne(){
				setTimeout(()=>{
					this.ying=true
				},310)
			},
			// 隐藏透明背景
			backClick(){
				this.ying=false
				this.drop=false
				this.sortmen=false
			},
			// 商家特色(多选)
			screenchoIce(indexs,sign){
				console.log(sign)
				if(this.screendata[0].datas[indexs].id==1){
					// 选中	
					this.screendata[0].datas[indexs].id=2
					console.log("选中")
					this.$set(this.multiobj,sign,sign)
					// this.$set个对象添加一个属性
					console.log(this.multiobj)
				}
				else{	
					// 未选中
					this.screendata[0].datas[indexs].id=1
					// console.log("未选中")
					this.$delete(this.multiobj,sign)
					console.log(this.multiobj)
				}
			},
			// 人均价
			pesonechoIce(indexs,name){
				 if(this.scrnum==indexs){
					// 未选中
					this.scrnum=-1
					this.$delete(this.multiobj,"capita")
					console.log(this.multiobj)
				}
				 else{	
					// 选中
					this.scrnum=indexs
					this.$set(this.multiobj,"capita",name)
					console.log(this.multiobj)
				}
			},
			// 清空
			emPty(){
				// 商家特色
				this.screendata.forEach((item)=>{
					let arr = item.datas.map((items)=>{
							items.id=1
							return items
					})
					console.log(arr)
				})
				this.multiobj={}
				// 人均价
				this.scrnum=-1
				this.backClick()
			},
			// 清空
			compLete(){
				publicing(multipleurl,this.multiobj)
				.then((res)=>{
					console.log(res)
					this.$store.commit("screenmuta",res.data)
				})
				.catch((err)=>{
					console.log(err)
				})
				this.backClick()
			},
		},
			// 如果用户没有点击任何筛选条件，完成按钮应该被禁用
			computed:{
				// this.multiobj如果是空对象，禁止点击完成按钮，反之可以点击
				emptyIng(){
					let obj = JSON.stringify(this.multiobj)=="{}"
					console.log(obj);//true 表示空对象 false 有东西
					if(obj==true){
						this.flag=false
					}else{
						this.flag=true
					}
				}
				
			}
	}
</script>

<style scoped>
	.delica-view image {
		width: 30upx;
		height: 30upx;
		display: block;

	}

	.delica-view {
		font-size: 30upx;
		display: flex;
		align-items: center;
		color: #666;
		height: 70upx;
		padding: 0 15upx;
		background: #fff;
	}

	.delica-list {
		display: flex;
		align-items: center;
	}

	.delica-right {
		justify-content: flex-end;
		flex-grow: 5;
	}

	.delica-grow {
		flex-grow: 1;
	}

	.prefer-posi {
		position: absolute;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 99;
	}

	/* 排序 */
	.sortlist {
		background: #fff;
	}
	.sortliteltle text {
		padding: 0 15upx;
		display: block;
		font-size: 30upx;
		height: 70upx;
		line-height: 70upx;
		border-top: 1rpx solid #ededed;
	}
	.activeb {
		color: #f89903 !important;
	}
	/* 选择 */
	/* 相对定位 */
	.sortlist-view{
		height: 700upx;
		overflow: hidden;
		overflow-y: scroll;
		position: relative;
	}
	
	.sorlist-title{
		padding: 0 15upx;
		font-size: 30upx;
		height: 60upx;
		line-height: 60upx;
	}
	.Choice{
		font-size: 28upx;
		background: #f8f8f8;
		height: 55upx;
		line-height: 55upx;
		color: #666;
		width: calc((100% / 3)-15px) !important;
		margin: 7.5px;
		text-align: center;
		display: block;
		border-radius: 5upx;
	}
	.sorlist-flex{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 30upx;
	}
	.sorlist-bottom{
		background: #fff;
		height: 80upx;
		border-top: 1upx solid #e4e4e4;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.sorlist-bottom text{
		flex-grow: 1;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
	}
	.sorlist-bottom text:nth-child(1){
		border-radius: 1upx solid #e4e4e4;
	}
	.sorlist-bottom text:nth-child(2){
		background: #ffd348;
	}
	.yin{
		
		height: 100%;
		background: #808080 ;
	}
	/* 商家特色加样式 */
	.scractive{
		background: #fef6df !important;
		color: #f29909 !important;
	}
</style>
